<script setup lang="ts">
//子组件通过 defineProps 进行接收父组件传递过来的数据
// 如果需要给 props 设置默认值，需要使用 withDefaults 函数
withDefaults(
    defineProps<{
        text?: string,
        money?: number
    }>(),
    { text: '我是子组件数据', money: 22 }
)

//子传父
// 具体操作步骤:
// 1.通过defineProps接收父组件传递过来的数据
// 2.通过defineEmits定义一个回调函数并传递数据
// 3.父组件通过@回调函数名进行接收子组件的函数
// 4.父组件通过定义一个方法接收子组件这边传递过来的参数用于回显
const emit = defineEmits<{
    // e:'changeMoney':回调函数,money:参数
    (e: 'changeMoney', money: number): void
}>()
</script>

<template>
    <div>
        <h3>{{ text }}</h3>
        <h3>{{ money }}</h3>
        <!-- 注册点击事件 -->
        <button @click="emit('changeMoney', 1000)">我是子组件按钮</button>
    </div>
</template>

<style scoped>
div {
    background-color: red;
    width: '100%';
    height: 120px;
    font-size: 20px;
}
</style>